<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		div{
			width: 100%;
			height: 500px;
		}
		.div1{
			background-color: red;
		}
		.div2{
			background-color: green;
		}
		.div3{
			background-color: blue;
		}
		.div4{
			background-color: yellow;
		}
		.fixDiv{
			width: 50px;
			height: 200px;
			position: fixed;
			top: 200px;
			left:0;
		}
		.fixDiv ul li{
			height: 48px;
			width: 48px;
			margin-bottom: 20px;
			text-align: center;
			border:1px solid black;
			background-color: white;
			line-height: 48px;
		}
		.fixDiv ul .active{
			background-color: orange;
		}
		.footer{
			height: 300px;
			width: 100%;
		}
	</style>
</head>
<body>
	<div class="fixDiv">
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ul>
	</div>
	<div id="divS">
		<div class="div1"></div>
		<div class="div2"></div>
		<div class="div3"></div>
		<div class="div4"></div>
		<!-- <div class="footer"></div> -->
	</div>
	
	<script>
		window.onload=function(){
			var lis=document.getElementsByTagName('li');
			var divs=document.getElementById('divS').getElementsByTagName('div');
			var arr=[];
			var t;
			for (var i = 0; i < lis.length; i++) {
				lis[i].index=i;
				arr.push(divs[i].offsetTop);
				lis[i].onclick=function(){
					clearInterval(t);
					for (var i = 0; i < lis.length; i++) {
						lis[i].className="";
					}
					lis[this.index].className="active";
					var x=parseInt(document.documentElement.scrollTop);
					var h=arr[this.index];
					console.log(x+";"+h)
					if (x<h) {
							t=setInterval(function(){
							x++;
							document.documentElement.scrollTop=x;
							if (x==h) {
								console.log(1)
								clearInterval(t)
							}
						},1)
					}else if(x>h){
							t=setInterval(function(){
							x--;
							document.documentElement.scrollTop=x;
							if (x==h) {
								clearInterval(t)
							}
						},1)
					}else{
						clearInterval(t)
					}
				}
			}
		}
	</script>
</body>
</html>